---
metaTitle: Card
metaDescription: Container that groups related content and actions.
sourcePath: components/card
---

```jsx live=true
<Box maxWidth="240px">
	<Card>
		<Flex gap="3" align="center">
			<Avatar
				size="3"
				src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
				radius="full"
				fallback="T"
			/>
			<Box>
				<Text as="div" size="2" weight="bold">
					Teodros Girmay
				</Text>
				<Text as="div" size="2" color="gray">
					Engineering
				</Text>
			</Box>
		</Flex>
	</Card>
</Box>
```

## API Reference

This component is based on the `div` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

<ThemesPropsTable defs="cardPropDefs" />

## Examples

### As another element

Use the `asChild` prop to render the card as a link or a button. This prop adds styles for the interactive states, like hover and focus.

```jsx live=true
<Box maxWidth="350px">
	<Card asChild>
		<a href="#">
			<Text as="div" size="2" weight="bold">
				Quick start
			</Text>
			<Text as="div" color="gray" size="2">
				Start building your next project in minutes
			</Text>
		</a>
	</Card>
</Box>
```

### Size

Use the `size` prop to control the size.

```jsx live=true
<Flex gap="3" direction="column">
	<Box width="350px">
		<Card size="1">
			<Flex gap="3" align="center">
				<Avatar size="3" radius="full" fallback="T" color="indigo" />
				<Box>
					<Text as="div" size="2" weight="bold">
						Teodros Girmay
					</Text>
					<Text as="div" size="2" color="gray">
						Engineering
					</Text>
				</Box>
			</Flex>
		</Card>
	</Box>

	<Box width="400px">
		<Card size="2">
			<Flex gap="4" align="center">
				<Avatar size="4" radius="full" fallback="T" color="indigo" />
				<Box>
					<Text as="div" weight="bold">
						Teodros Girmay
					</Text>
					<Text as="div" color="gray">
						Engineering
					</Text>
				</Box>
			</Flex>
		</Card>
	</Box>

	<Box width="500px">
		<Card size="3">
			<Flex gap="4" align="center">
				<Avatar size="5" radius="full" fallback="T" color="indigo" />
				<Box>
					<Text as="div" size="4" weight="bold">
						Teodros Girmay
					</Text>
					<Text as="div" size="4" color="gray">
						Engineering
					</Text>
				</Box>
			</Flex>
		</Card>
	</Box>
</Flex>
```

### Variant

Use the `variant` prop to control the visual style.

```jsx live=true
<Flex direction="column" gap="3" maxWidth="350px">
	<Card variant="surface">
		<Text as="div" size="2" weight="bold">
			Quick start
		</Text>
		<Text as="div" color="gray" size="2">
			Start building your next project in minutes
		</Text>
	</Card>

	<Card variant="classic">
		<Text as="div" size="2" weight="bold">
			Quick start
		</Text>
		<Text as="div" color="gray" size="2">
			Start building your next project in minutes
		</Text>
	</Card>
</Flex>
```

### With inset content

Use the [Inset](/themes/docs/components/inset) component to align content flush with the sides of the card.

```jsx live=true
<Box maxWidth="240px">
	<Card size="2">
		<Inset clip="padding-box" side="top" pb="current">
			<img
				src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
				alt="Bold typography"
				style={{
					display: "block",
					objectFit: "cover",
					width: "100%",
					height: 140,
					backgroundColor: "var(--gray-5)",
				}}
			/>
		</Inset>
		<Text as="p" size="3">
			<Strong>Typography</Strong> is the art and technique of arranging type to
			make written language legible, readable and appealing when displayed.
		</Text>
	</Card>
</Box>
```
